<template>
	<view class="container">
		
		<view class="recharge_detail_wrap ">
			<image src="/static/bank.png" mode="widthFix" class="qian_img"></image>
			<view class="uni-flex qianabo uni-flex-align uni-flex-center">
				<view class="wenzi">可用余额 </view>
				
			</view>
			<view class="address">{{dataInfo.balance}}</view>
			
		</view>
		
		<view class="user_list block_div">
			<view class="list uni-flex uni-flex-bt uni-flex-align" @click="bind_zhang">
				<view class="left uni-flex uni-flex-align">
					<view class="wenzi">提现方式</view>
				</view>
				<view class="right uni-flex uni-flex-align">
					<view class="">{{ti_info.bank_name}}</view>
					<text class="cuIcon cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="common_list block_div">
			<view class="title">提现金额</view>
			<view class="inpt uni-flex uni-flex-align">
				<input type="number" v-model="price" placeholder="请输入提现金额" placeholder-style="color:#999">
				<!-- <view class="wenzi">CNY</view> -->
			</view>
		</view>
		<view class="common_list block_div" style="margin-top: 20rpx;">
			<view class="title">交易密码</view>
			<view class="inpt uni-flex uni-flex-align">
				<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#999">
			</view>
		</view>
		<view class="tips1" v-html="dataInfo.withdraw"> </view>
		<view class="btns" @click="submite">提交</view>
		<tui-bottom-popup :show="popupShow"  @close="hidePopup">
			<view class="popup_main">
				<view class="title">请选择提现账户</view>
				<scroll-view  scroll-y="true" style="max-height: 600rpx;">
					<view class="wallet_list">
						<view class="list uni-flex uni-flex-align uni-flex-bt" v-for="(item,index) in list" :key="index"  @click="go_check(item)">
							<view class="left uni-flex uni-flex-align">
								<image :src="item.logo" mode="widthFix" style="height: 88rpx;"></image>
								<view class="wenben">
									<view class="name">{{item.bank_name}}</view>
									<view class="miaoshu flex flex-align">
										<view style="margin-right: 10rpx;font-weight: bold;padding-top: 4rpx;">**** **** ****</view>
										<view>{{item.bank_card}}</view>
									</view>
								</view>
							</view>
							<view class="right">
								<radio value="aa" :checked="type==item.id" style="transform: scale(.7);" color="#f20" />
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="list_wu" @click="go_url('/pages/bank/add_bank')">绑定提现账户</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				type:0,
				price:'',
				popupShow:false,
				dataInfo:'',
				list:'',
				ti_info:'',
				password:'',
				is_open:false,
				
			}
		},
		onLoad(e) {
		},
		onShow() {
			this.getInfo()
			this.getBank()
		},
		onNavigationBarButtonTap() {
			this.tui.href('/pages/tixian/tixian_record')
		},
		methods: {
			hidePopup(){
				this.popupShow = false
			},
			go_url(e){
				this.tui.href(e)
				this.popupShow = false
			},
			bind_zhang(){
				this.popupShow = true
			},
			getBank(){
				let that = this
				that.tui.request('api.auth.center/bankList', "POST",{}, false, false, true).then((res) => {
					if(res.code==1){
						that.list = res.data.list
						that.type =that.list[0].id
					}
				}).catch((res) => {})
			},
			getInfo(){
				let that = this
				that.tui.request('api.auth.center/withdrawInfo', "POST",{}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataInfo = res.data
						that.ti_info = that.list[0]
					}
				}).catch((res) => {})
				
			},
			go_check(e){
				this.type =e.id
				this.ti_info = e
				this.popupShow = false
			},
			submite(){
				let that = this
				if(that.price ==''){
					that.tui.toast('提现金额不能为空')
					return false
				}
				if(that.type ==0){
					that.tui.toast('请选择提现方式')
					return false
				}
				if(that.password ==''){
					that.tui.toast('交易密码不能为空')
					return false
				}
				console.log(that.is_open)
				if(that.is_open){
					return false
				}
				that.is_open = true
				that.tui.request('api.auth.center/withdrawSub', "POST",{price:that.price,withdraw_id:that.ti_info.id,type:that.type,pay_password:that.password}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						that.price = ''
						that.password =''
						that.type = 0
						that.getInfo()
					}
					
				}).catch((res) => {})
				setTimeout(function(){
					that.is_open = false
				},2000)
			}
		}
	}
</script>

<style lang="scss">
	input{height: auto;line-height: inherit;}
	.common_list{margin:0 20rpx 0rpx;padding: 30rpx;background: #fff;
		.title{margin-bottom: 40rpx;color: #999;margin-top: 20rpx;}
		.inpt{
			input{font-size: 24rpx;border-bottom: 1px solid #eee;width: 100%;padding-bottom: 20rpx;}
			.wenzi{color: #999;}
		}
	}
	.recharge_detail_wrap{margin: 20rpx;text-align: center;padding: 60rpx 0;
		.qian_img{width:100rpx;border-radius: 100%;}
		.address{color: #333;font-weight: bold;font-size: 36rpx;}
		.qianabo{color: #999;margin: 20rpx 0;
			.wenzi{margin-right: 10rpx;}
		}
		.bank_list{padding: 0 30rpx;
			.title{color: #999;padding:0 10rpx 10rpx;}
			.list{border-bottom: 1px solid #eee;padding: 10rpx 10rpx 20rpx;margin-bottom: 20rpx;
				.right{
					image{width: 30rpx;}
				}
			}
		}
	}
	.user_list{margin: 20rpx;background: #fff;padding: 0 30rpx;
		.list{padding: 30rpx 0;
			.wenzi{font-size: 28rpx;color: #999;}
			.right{color: #999;}
		}
	}
	.tips1{color: $base;padding: 30rpx;line-height: 1.6;}
	.btns{    height: 80rpx;line-height: 80rpx;font-size: 32rpx;width: 80%;background:$base;border-radius: 46rpx;color: #fff;margin: 80rpx auto 30rpx;text-align: center;}
	
	.popup_main{border-radius: 32rpx 32rpx 0 0;overflow: hidden;
	.title{ position: relative;-webkit-uni-flex-shrink: 0;uni-flex-shrink: 0;padding: 40rpx 32rpx;color: #969799;font-size: 28rpx;text-align: center;border-bottom: 1px solid #eee;}
	.list_wu{color: rgb(255, 0, 0);text-align: left;padding: 20rpx 32rpx 40rpx;font-size: 28rpx;}}
	.wallet_list{
		.list{background: #fff;margin:10rpx 30rpx 30rpx;padding: 30rpx 0;border-bottom: 1px solid #eee;
			.left{
				image{width: 80rpx;border-radius: 100%;margin-right: 10rpx;}
				.wenben{
					.name{margin-bottom: 10rpx;}
					.miaoshu{color: #999;}
				}
			}
			.right{color: #999;}
		}
	}
</style>
